<template>
	<view>
		<view class="flex align between title">
			<view style="font-weight: bold;">{{info.title}}</view>
			<view class="status">{{info.status_text}}</view>
		</view>
		<view class="content">
			{{info.content}}
			<image v-for="(item,index) in info.images" :key="index" :src="item.path" mode="widthFix"></image>
		</view>
		<!-- 过程 -->
		<view class="steps" v-if="type==1">
			<view v-if="info.status==3">
				<uni-section title="基本用法" type="line" padding>
					<uni-steps :options="list2" :active="1" active-color="#C8280A" />
				</uni-section>
			</view>
			<view v-if="info.status<3">
				<uni-section title="基本用法" type="line" padding>
					<uni-steps :options="list1" :active="active" active-color="#C8280A" />
				</uni-section>
			</view>
			<view v-if="info.status>3">
				<uni-section title="基本用法" type="line" padding>
					<uni-steps :options="list1" :active="active-1" active-color="#C8280A" />
				</uni-section>
			</view>
		</view>
		<view v-if="info.reply_content!=''&&info.reply_content!=null">
			<view class="flex align between title2" style="color: #C8280A;">
				<view>回复内容</view>
				<!-- <view style="color: #FF664A;">写留言</view> -->
			</view>
			<view class="list">
				<view>{{info.reply_content}}</view>
				<view v-for="(item,index) in info.reply_images" :key="index">
					<image :src="'https://xsdy.ncscloudmedia.com'+item.url"
						style="width: 100%;height: 200rpx;margin: 20rpx 0;" mode="widthFix"></image>
				</view>
				<view v-if="info.reply_time!=''" style="text-align: right;color: gray;">{{info.reply_time}}</view>
			</view>
		</view>
		<!-- <view class="flex align between title2">
			<view>留言</view>
			<view style="color: #FF664A;">写留言</view>
		</view> -->
		<!-- 	<view class="list flex between" v-for="(item,index) in 3" :key="index">
			<image src="/static/images/mine/head.png"></image>
			<view class="list-info">
				<view class="name flex align between">
					<view>张三</view>
					<view style="color: #828282;font-size: 18rpx;">2024-05-07</view>
				</view>
				<view>留言留言留言留言留言留言留言留言留言留言留</view>
				<view class="flex align del">
					<view style="margin-right: 24rpx;"><uni-icons type="trash" size="16"></uni-icons>删除</view>
					<view><uni-icons type="hand-up-filled" size="16"></uni-icons>5</view>
				</view>
			</view>
		</view> -->
		<!-- 写留言 -->
		<!-- <view class="bto-input flex align between">
			<input placeholder="写留言"/>
			<view class="input-btn">发送</view>
		</view> -->
	</view>
</template>

<script>
	import {
		problemDetail,
		publicDetail,
		problemDetailAd
	} from '@/api/apiData.js';
	export default {
		data() {
			return {
				active: 0,
				list1: [{
					title: '待审核'
				}, {
					title: '已通过'
				}, {
					title: '处理中'
				}, {
					title: '结果反馈'
				}],
				list2: [{
					title: '待审核'
				}, {
					title: '未通过'
				}],
				info: '',
				type: 1
			};
		},
		onLoad(option) {
			this.id = option.id
			if (option.type == 2) {
				this.type = option.type
				this.getInfo2()
			} else if (option.type == 3) {
				this.getInfo3()
			} else {
				this.getInfo()
			}
		},
		onShow() {},
		methods: {
			async getInfo() {
				const result = await problemDetail({
					problem_id: this.id
				})
				this.info = result.data
				this.active = result.data.status - 1
			},
			async getInfo2() {
				const result = await publicDetail({
					problem_id: this.id
				})
				this.info = result.data
				this.active = result.data.status - 1
			},
			async getInfo3() {
				const result = await problemDetailAd({
					id: this.id
				})
				this.info = result.data
				this.active = result.data.status - 1
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		padding-bottom: 200rpx;
	}

	.title {
		background: white;
		padding: 17rpx 24rpx;

		.status {
			color: #E38F00;
			font-size: 24rpx;
		}
	}

	.content {
		font-size: 24rpx;
		padding: 14rpx 24rpx 60rpx;
		background: white;
		margin-top: 10rpx;

		image {
			width: 100%;
			height: 200rpx;
			margin-top: 50rpx;
		}
	}

	.steps {
		background: white;
		margin-top: 10rpx;
		padding: 30rpx 0;
	}

	.title2 {
		font-size: 28rpx;
		padding: 13rpx 24rpx;
		background: white;
		margin: 10rpx 0;
	}

	.list {
		font-size: 24rpx;
		background: white;
		padding: 22rpx 33rpx;
		margin-bottom: 5rpx;

		image {
			width: 63rpx;
			height: 63rpx;
		}

		.list-info {
			width: 88%;
		}

		.name {
			margin-bottom: 10rpx;
		}

		.del {
			margin-top: 34rpx;
			justify-content: flex-end;
		}
	}

	.bto-input {
		position: fixed;
		width: 100%;
		background: white;
		left: 0;
		bottom: 0;
		padding: 12rpx 0 70rpx;

		input {
			margin-left: 24rpx;
			background: #F3F2F2;
			border-radius: 5rpx;
			padding: 16rpx 24rpx;
			width: 70%;
		}

		.input-btn {
			background: #FF917D;
			border-radius: 5rpx;
			color: white;
			width: 106rpx;
			line-height: 74rpx;
			text-align: center;
			margin-right: 24rpx;
		}
	}
</style>